@import url("http://fonts.googleapis.com/css?family=Kanit");
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #333;
}

.star {
  width: 36px;
  height: 36px;
  position: absolute;
  left: calc(50% - 18px);
  top: calc(20vh - 22px);
  z-index: 2;
  background-color: #ffce54;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: 0.3s;
}
.star:hover {
  background: url("../../images/op1/1.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  width: 50vw;
  height: 50vh;
  border-radius: 20px;
  -webkit-clip-path: none;
          clip-path: none;
  left: calc(50% - 25vw);
}
.star:hover::before {
  content: "Merry Christmas";
}
.star::before {
  content: "";
  position: absolute;
  top: 55vh;
  width: 100%;
  text-align: center;
  color: #555;
  font-size: 6vw;
  color: #555;
  font-size: 6vw;
  font-family: "Kanit";
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 120px #fff, 0 0 180px #fff;
}

ul {
  padding: 0;
}
ul li {
  list-style: none;
}

.tree li {
  position: absolute;
  top: 20vh;
  right: 50%;
  width: 1px;
  height: var(--h);
  background: linear-gradient(transparent, rgba(46, 204, 113, 0.35));
  transform-origin: 50% 0;
  -webkit-animation: swing 4s ease-in-out infinite;
          animation: swing 4s ease-in-out infinite;
  -webkit-animation-delay: var(--d);
          animation-delay: var(--d);
}
.tree li::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: red;
}
.tree li:nth-child(4n)::before {
  background-color: #d8334a;
}
.tree li:nth-child(4n+1)::before {
  background-color: #ffce54;
}
.tree li:nth-child(4n+2)::before {
  background-color: #2ecc71;
}
.tree li:nth-child(4n+3)::before {
  background-color: #5d9cec;
}

@-webkit-keyframes swing {
  0%, 100% {
    transform: rotateZ(-30deg);
  }
  5%, 45% {
    opacity: 0.25;
  }
  50%, 100%, 0% {
    opacity: 1;
  }
  50% {
    transform: rotateZ(30deg);
  }
}

@keyframes swing {
  0%, 100% {
    transform: rotateZ(-30deg);
  }
  5%, 45% {
    opacity: 0.25;
  }
  50%, 100%, 0% {
    opacity: 1;
  }
  50% {
    transform: rotateZ(30deg);
  }
}/*# sourceMappingURL=index.css.map */